<template>
	<view class="shop-orders mainbgc">
		<!-- tab栏： -->
		<view class="topTab tabBg  ffffff">
			<u-tabs :list="tabList" :current="current" @click="click" lineColor="#00D4E2"
				itemStyle="height:88rpx; padding: 0rpx 32rpx 0rpx 32rpx;" lineWidth="30"></u-tabs>
		</view>
		<view class="flexcenter1" v-if="!list.data.length">
			<view class="placeholderimg" style="margin-top: 300rpx;" v-show="showMain">
				<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
			</view>
			<view class="zanwushuju" v-show="showMain">暂无数据~</view>
		</view>
		<view class="mainpadding" v-show="showMain">
			<view class="shopOrderItem ffffff mainpadding border-r2" v-for="(item,i) in list.data" :key="item.id"
				@click="toShopOrderDetail(item)">
				<view class="title flexleft2">
					<view class="add">订单编号：{{item.order_no}}</view>
					<view class="tStatus" v-if="item.state==1">待支付</view>
					<view class="tStatus1" v-if="item.state==2 && item.buy_type==2">待发货</view>
					<view class="tStatus1" v-if="item.state==2 && item.buy_type==1">备货中</view>
					<view class="tStatus1" v-if="item.state==3 && item.buy_type==2">待收货</view>
					<view class="tStatus1" v-if="item.state==3 && item.buy_type==1">待提取</view>
					<view class="tStatus1" v-if="item.state==4">待评论</view>
					<view class="tStatus1" v-if="item.state==6">已完成</view>
					<view class="tStatus" v-if="item.state==7">已取消</view>
					<view class="tStatus2" v-if="item.state==8">取消审核中</view>
				</view>

				<view class="ticket-details margin-top" v-for="item1 in item.goods" :key="item1.id">
					<view class="img">
						<image :src="item1.image_text" mode=""></image>
					</view>
					<view class="details">
						<view class="name">{{item1.title}}</view>
						<view class="size">{{item1.difference}}</view>
						<view class="pAc flexleft2">
							<text class="tMoney">￥{{item1.price}}</text>
							<text class="tCount">x{{item1.number}}</text>
						</view>
					</view>
				</view>
				<!-- 提示： -->
				<view class="tips">共计{{item.goods_num}}件商品 合计￥<text class="tMoney">{{item.total_price}}</text></view>
				<!-- 按钮： -->
				<view class="btn-box flexleft">
					<view class="quxiao" v-if="item.state==1 || item.state==2" @click.stop="cancleorder(item)">取消订单
					</view>
					<view class="zhifu" v-if="item.state==1" @click.stop="atoncepay(item)">立即支付</view>
					<view class="shanchu" v-if="item.state==6 || item.state==7" @click.stop="delorder(item)">删除订单</view>
					<!-- <view class="zhifu">查看券码</view> -->
					<view class="zhifu" v-if="item.state==3 && item.buy_type==1" @click.stop="suresh(item)">确认自提</view>
					<view class="zhifu" v-if="item.state==3 && item.buy_type==2" @click.stop="suresh(item)">确认收货</view>
					<view class="shanchu" @click.stop="searchExpress(item)" v-if="item.state==3 && item.buy_type==2">查看物流
					</view>
				</view>
			</view>
		</view>
		<!-- 弹层：-->
		<view class="popUp">
			<u-modal :show="show" title="物流单号" :closeOnClickOverlay="true" @confirm="copydingdanhao()" confirmText="点击复制" :showConfirmButton="true"
				@close="close" :slots="confirmButton">
				<view class="slot-content mainpadding">
					<rich-text :nodes="content1"></rich-text>
					<rich-text :nodes="content2"></rich-text>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tabList: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '已完成'
					}
				],
				show: false,
				content1: ``,
				content2: ``,
				confirmButton: '66',
				list: {
					data: []
				},
				limit: 12,
				page: 1,
				states: 0,
				current:0,
				
				showMain:false,
			}
		},
		onLoad(options) {
			if(options.itemindex){
					 this.current=options.itemindex 
					 if(options.itemindex==4){
						 this.states=6
					 }else{
						  this.states=options.itemindex 
					 }
					 this.init() 
					}else{
						this.init()
					}
		},
		methods: {
			click(tabitems) {
				if(tabitems.index==4){
					this.states=6
				}else{
				this.states = tabitems.index
				}
				this.init()
			},
			searchExpress(item) {
				this.content1=item.express_name
				this.content2=item.express_no
				this.show = true
			},
			close() {
				this.show = false
			},
			toShopOrderDetail(item) {
				uni.navigateTo({
					url: '/pages/my/shangchengddxq?id=' + item.id
				})
			},
			atoncepay(item) {
				let _this = this
				let data = {
					id: item.order_pay_no,
					pay_price: item.total_price,
					type: 3,
					allscore:item.allow_score
				}
				uni.navigateTo({
					url: '/pages/hotel/hotelorder?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 确认收货
			suresh(item) {
				let _this=this;
				httpRequest.modal('', '请再次确认', true, (res) => {
					if (res) {
						httpRequest.request('api/goodsorder/confirmOrder', 'POST', {
							id: item.id,
						}, false, false, true).then(res => {
							console.log(res);
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								_this.init()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			//删除订单
			delorder(item) {
				let _this = this
				httpRequest.modal('', '确认删除订单?', true ,(res) => {
					if (res) {
						httpRequest.request('/api/goodsorder/delOrder', 'POST', {
							id: item.id,
						}, false, false, true).then(res => {
							if (res.code == 1) {
								httpRequest.toast('删除成功!')
								_this.init()
							} else {
								httpRequest.toast(res.msg);
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('api/goodsorder/getOrderList', 'POST', {
					state: _this.states,
					page: page || 1,
					limit: _this.limit,
				}, false, false, false).then(res => {
					this.showMain=true
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					this.showMain=true
					httpRequest.toast(err.msg);
				})
			},
			//取消订单
			cancleorder(item) {
				let _this = this
				httpRequest.modal('', '确认取消订单?', true, (res) => {
					if (res) {
						httpRequest.request('/api/goodsorder/cancelOrder', 'POST', {
							order_id: item.id,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								_this.init()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			//复制订单号
			copydingdanhao(content){
						  console.log(1)
						  let _this=this
						 uni.setClipboardData({
						 	data:_this.content2,
						 	success() {
						 		httpRequest.toast("复制成功")
						 	}
						 })
						  _this.show=false
			},
			close(){
						  this.show=false
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		},

	}
</script>

<style la lang="scss" scoped>
	.anniu {
		padding: 15rpx 0;
		width: 100%;
		text-align: center;
		background-color: #ffa126;
	}

	.add {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.tStatus {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF0000;
	}
	.tStatus2{
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #ffa126;
	}

	.tStatus1 {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(0, 210, 225, 1);
	}

	.name {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.ticket-details {
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #fafafa;
		padding-bottom: 30rpx;
	}

	.img {
		width: 124rpx;
		height: 124rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.details {
		flex: 1;
		margin-left: 30rpx;
	}

	.pAc {
		// margin-top: 42rpx; 
	}

	.tMoney {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.tCount {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.tips {
		padding: 30rpx 0;
		text-align: right;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.btn-box {
		float: right;
	}

	.quxiao {
		padding: 8rpx 30rpx;
		border: 2rpx solid #666666;
		border-radius: 30rpx;
		margin-left: 25rpx;
	}

	.zhifu {
		padding: 8rpx 30rpx;
		border-radius: 30rpx;
		margin-left: 25rpx;
		border: 2rpx solid #00D2E1;
		color: #00D2E1;
	}

	.shanchu {
		padding: 8rpx 30rpx;
		border: 2rpx solid #666666;
		border-radius: 30rpx;
		margin-left: 25rpx;
	}

	.shopOrderItem {
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.size {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 9rpx 0;
	}

	.slot-content {
		text-align: center;
	}
</style>
